<template>
	<div>
	<div class="title">周末去哪儿</div>
	<ul>
		<li class="item border-bottom" 
		    v-for="item of recommendList" 
		    :key="item.id">
		    <div class="item-img-wrapper">
		    	<img class="item-img" :src="item.imgUrl">
		    </div>
		    <div class="item-info">
		    	<p class="item-title">{{item.title}}</p>
		    	<p class="item-desc">{{item.desc}}</p>
		    </div>
		</li>
	</ul>
    </div>
</template>

<script>
export default {
	name: "HomeWeekend",
	data () {
		return {
			recommendList: [{
			id: '0001',
			imgUrl: 'http://img1.qunarzz.com/sight/source/1507/d9/2ddc7652fdba16.jpg_r_640x214_5e62f1a3.jpg',
			title: '大连圣亚海洋公园',
			desc: '浪漫大连首站，浪漫的海洋公园'
		}, {
			id: '0002',
			imgUrl: 'http://img1.qunarzz.com/sight/source/1507/d9/2ddc7652fdba16.jpg_r_640x214_5e62f1a3.jpg',
			title: '世界之窗',
			desc: '深圳的世界之窗'
		}, {
			id: '0003',
			imgUrl: 'http://img1.qunarzz.com/sight/source/1507/d9/2ddc7652fdba16.jpg_r_640x214_5e62f1a3.jpg',
			title: '东部华侨城',
			desc: '深圳的东部华侨城'
		}]
		}
	}
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
	.title
	  
	  line-height: .8rem
	  text-align: left
	  background: #eee
	  text-indent: .2rem
	.item-img-wrapper
	  overflow: hidden
	  height: 0
	  padding-bottom: 33.9%
	  .item-img
	    width: 100%
	.item-info
	  padding: .1rem
	  text-align: left
	.item-title
	  line-height: .54rem
	  font-size: .32rem
	  ellipsis()
	.item-desc
	  line-height: .4rem
	  color: #ccc
	  ellipsis()

	
</style>
